<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table id="init" class="table">
    <thead>
    <tr>
    <th>title</th>
    <th>Category</th>
    <th>StartTime</th>
    <th>EndTime</th>
    <th>State</th>
    <th>Operation</th>
    </tr>
    </thead>
    <tbody v-for="activity in activityList">
    <tr>
    <th>{{activity.title}}</th>
    <th>{{activity.category}}</th>
    <th>{{activity.startTime}}</th>
    <th>{{activity.endTime}}</th>
    <th>{{activity.state}}</th>
    <th>{{activity.peration}}O</th>
    </tr>
    </tbody>
</table>

<button type="button" class="btn btn-primary btn-sm"
        data-toggle="modal" data-target="#myModal">创建活动
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">创建活动</h4>
            </div>
            <div class="modal-body">


                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-10">
                        <label>标题</label>
                        <input type="text" v-model="title"  class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                            <label>类型</label>
                            <select v-model="category">
                                <option value="eat">吃饭</option>
                                <option value="sleep">睡觉</option>
                                <option value="play">打游戏</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                            <label>开始时间</label>
                        <input type="date" v-model="startTime"  class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                        <label>结束时间</label>
                        <input type="date" v-model="endTime"  class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                        <label>备注</label>
                            <textarea class="form-control" rows="5" v-model="remark"></textarea>
                        </div>
                    </div>




                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" v-on:click="save()">
                    创建活动</button>
            </div>
        </div>
    </div>
</div>




<script src="JQuery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vue/vue.js"></script>
<script src="vue/axios.min.js"></script>
<script>
    var table={
        el:"#init",
        data:{
            activityList:[]

        },
        methods:{
            findAll:function (){
                let url="http://localhost:8080/findAll";
                axios.get(url)
                .then(function (res){
                    this.vue.activityList=res.data;
                })
                .catch();
            }

        },
        mounted:function (){
            this.findAll();
        }
    }
    var form={
        el:"#myModal",
        data:{
            title:"",
            category:"",
            remark:"",
            startTime:"",
            endTime:""
        },
        methods:{
            save:function (){
               let url="http://localhost:8080/save";
                let params={
                    "title":this.title,
                    "category":this.category,
                    "remark":this.remark,
                    "startTime":this.startTime,
                    "endTime":this.endTime
                };
                axios.post(url,params)
                .then(function (res){
                    this.vue.findAll();
                })
                .catch();

            }

        },
        mounted:function (){

        }
    }
    var vue=new Vue(table);
    var sub=new Vue(form);
</script>
</body>
</html>